<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 商品列表
        </el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row :gutter="4" style="margin-bottom:20px">
        <el-col :span="4">
          <el-input v-model="form.name6" placeholder="商品名称" clearable></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="search">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="pageData.goods" style="width: 100%" border center>
        <el-table-column label="商品图标" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.images[0]" style="width:30%;" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="desc" label="商品简介" align="center"></el-table-column>

        <el-table-column prop="pet" label="适用宠物" align="center"></el-table-column>
        <el-table-column prop="price" label="价格" align="center"></el-table-column>

        <el-table-column prop="classify" label="商品种类" align="center"></el-table-column>
        <el-table-column prop="shopId.name" label="商品门店" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button @click="updata(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>

            <el-button v-if="scope.row == 1" @click="xx(2)" type="text" size="small">下架</el-button>
            <el-button v-if="scope.row == 2" @click="xx(1)" type="text" size="small">上架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:150px">
        <el-col :span="24" style="text-align:center">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[4,8,12]"
            :page-size="~~pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="~~pageData.totalCount"
            @next-click="next"
            @prev-click="top"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>

    <!-- 新增商品 -->

    <!--修改商品-->
    <el-dialog width="35%" title="修改商品" :visible.sync="dlgEdit">
      <el-form ref="nameForm" label-width="120px">
        <el-form-item prop="username" label="名称">
          <el-input placeholder="名称" v-model="form2.name"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="简介">
          <el-input placeholder="简介" v-model="form2.desc"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="价格">
          <el-input placeholder="简介" v-model="form2.price"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="适用宠物">
          <el-select
            placeholder="适用宠物"
            multiple
            collapse-tags
            v-model="form2.pet"
            style="width:100%;"
          >
            <el-option v-for="item in pets" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="username" label="商品种类">
          <el-select placeholder="商品种类" multiple v-model="items" style="width:100%;">
            <el-option v-for="item in classifys" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="username" label="商品门店">
          <el-select placeholder="商品门店" collapse-tags v-model="ss" style="width:100%;">
            <el-option v-for="item in shops" :key="item._id" :value="item._id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatas(form2._id)">修改</el-button>
      </div>
    </el-dialog>

    <!-- 关联 -->
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("goods");
export default {
  data() {
    const generateData = _ => {
      const data = [];
      const data2 = ["API1", "API2", "API3", "API4"];
      for (let i = 0; i < data2.length; i++) {
        data.push({
          key: i,
          label: data2[i]
        });
      }
      return data;
    };
    return {
      dataAPI: generateData(),
      value1: [],
      dlgRelationAPI: false,
      dlgNewScope: false,
      dataScope: [
        {
          id: 1,
          label: "appScope1",
          api: "API1"
        },
        {
          id: 3,
          label: "appScope2",
          api: "API2"
        },
        {
          id: 5,
          label: "appScope3",
          api: "API3,API4"
        }
      ],
      dlgRelation: false,
      options2: [],
      imageUrl: "",
      imageUrl2: "",
      dlgNew: false,
      dlgEdit: false,
      tableData: [],
      fullscreenLoading: false,
      currentPage: 1,
      form2: {},
      form: {
        name: "",
        name1: "",
        name2: "",
        name3: "",
        name4: [],
        name5: [],
        name5: ""
      },
      pageData: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        totalPages: "", // 总页数
        totalCount: "", // 总条数
        goods: [] // 学生数据
      },
      shops: [],
      ss: "",
      items: ""
    };
  },
  mounted() {
    const data = JSON.parse(localStorage.getItem("user"));
    axios.get("/shops").then(res => {
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].adminId._id === data._id && res.data[i].status == 2) {
          this.shops.push(res.data[i]);
        }
      }
    });
    this.getgoods();
  },
  computed: {
    ...mapState(["classifys", "pets"])
  },
  methods: {
    xx(type) {
      var x = type == 1 ? "上" : "下";
      this.$confirm("是否将该商品" + x + "架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getgoods() {
      const users = JSON.parse(localStorage.getItem("user"));
      console.log(users)
      const { currentPage, pageSize } = this.pageData;
      axios
        .get("/goods/getGoodsByPage", { params: {adminId:users._id, currentPage, pageSize } })
        .then(res => {
          console.log(res.data);
          this.pageData = res.data;
          const data = this.pageData.goods.map(v => {
              return { ...v, classify: v.classify.toString() };
          });
          this.pageData.goods = data;
          console.log(this.pageData);

        });
    },
    remove(v) {
      axios.post("/goods/deleteGoodsById", { _id: v._id }).then(res => {
        this.getgoods();
      });
    },
    updata(v) {
      this.dlgEdit = true;
      this.form2 = v;
      this.form2.classify = this.form2.classify.toString();
    },
    updatas(v) {
      this.form2.shopId = this.ss;
      this.form2.classify=this.items;
      let form2 = this.form2;
      axios.post("/goods/updateGoodsById", { form2 }).then(res => {
        this.dlgEdit = false;
        this.getgoods();
      });
    },
    search() {
      const name = this.form.name6;
      axios.post("/goods/searchGoods", { name }).then(res => {
        this.pageData.goods = res.data;
      });
    },
    next() {
      if (this.pageData.currentPage < this.pageData.totalCount) {
        this.pageData.currentPage++;
        this.getgoods();
      }
    },
    top() {
      if (this.pageData.currentPage <= 0) {
        this.pageData.currentPage = 1;
      } else {
        this.pageData.currentPage--;
        this.getgoods();
      }
    }
  }
};
</script>
<style scope>
#appManage .el-upload--text {
  width: 78px;
  height: 78px;
}

#appManage .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#appManage .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}

#appManage .avatar {
  width: 78px;
  height: 78px;
  display: block;
}
</style>
